<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    // 所有使用的key都被规定成基本类型
    let map = new Map();
    map.set('name', '大美女')//set就是塞进去值的意思，get就是取值的意思
    console.log(map.get('name'));//必须要和上一行格式一样
    // key如果是对象的话
    let obj = {}
    map.set(obj, '对象')
    console.log(map.get(obj));//必须要和上一行格式一样



    // key如果是函数的话
    let func = function () {
    }
    map.set(func, "这是函数")
    console.log(map.get(func));//必须要和上一行格式一样

    // key当做NAN
    map.set(NaN, "666")
    console.log(map.get(NaN));//必须要和上一行格式一样
    console.log(Number('aa'));//现有此看出Number('aa'),可以返回NaN
    console.log(map.get(Number('asd')));//由里到外分析，就相当于第二行的值


    // map的迭代，
    // for...of
    let map2 = new Map()
    map2.set('uname', '邵美丽')
    map2.set('age', '18')
    console.log(map2.get('uname'));//会打印出： '哈哈哈'

    console.log('\n循环:所有的');

    for (let [key, value] of map2) {

      console.log(key, ':', value);
    }

    // 查询所有的key,因为keys是自带的函数，所以不要忘记括号
    console.log('\n循环:1.所有的key');

    for (let key of map2.keys()) {
      console.log(key);
    }

    // 查询所有的value,因为keys是自带的函数，所以不要忘记括号
    console.log('\n循环2:.所有value');

    for (let value of map2.values()) {
      console.log(value);
    }



    // 方法迭代，for each
    console.log('\n循环:3.foreach实现所有的');
    map2.forEach(function (value, key) {
      console.log(value, key);
    })



    // map对象操作
    // map与array转换
    // 数组转换为map   
    console.log('\n数组转换成map');
    let arr = [['k1', 'v1'], ['k2', 'v2']]
    let map3 = new Map(arr)
    map3.forEach(function (value, key) {
      console.log(value, key);
    })


    // map转换成数组
    console.log('\n map转换成数组');
    // 现在数组变成了map3(也就是说map3是数组)
    let arr2 = Array.from(map3)//数组来自...
    console.log(arr2);


    // map进行合并

    console.log('\n map进行合并');
    let map4 = new Map([...map3, ...map2])
    console.log(map4);
    // console.log(map2.delete('uname'));//删除其中一个key以及他的值
  </script>
</head>

<body>
  <p>map分为key和value</p>
  <p>set可以自动排序，没有单独值</p>
  <p>Map 对象是键值对的集合。Map 中的一个键只能出现一次</p>
</body>

</html>